<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>LMCA Charting Demo</title>

    <link href="StyleSheet.css" rel="stylesheet" type="text/css" />
    <!--[if IE]><script language="javascript" type="text/javascript" src="scripts/excanvas.pack.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
    <script language="javascript" type="text/javascript" src="scripts/jquery.flot.js"></script>
    <script src="scripts/calcsForChart.js" type="text/javascript"></script>   
    <script type="text/javascript">

        $(function() {
            var i = 1;

            $('a#add').click(function() {
                if (i <= 12) {
                    var str = '<tr><th>t<sub>' + i + '</sub></th>'; //row header
                    str += '<td><input id="ht' + i + '" type="text" onchange="updateRow(' + i + ',\'lmca\')" /></td>'; //height input
                    str += '<td><input id="wt' + i + '" type="text" onchange="updateRow(' + i + ',\'lmca\')" /></td>'; //weight input
                    str += '<td><input id="lmca' + i + '" type="text" onchange="updateRow(' + i + ',\'lmca\')" /></td>'; //lmca input
                    str += '<td class="results" id="bsa' + i + '">&nbsp;</td>'; //bsa results
                    str += '<td class="results" id="lmcaZ' + i + '">&nbsp;</td></tr>'; //zscore results

                    $(str).appendTo('#tableData>tbody');
                    i++;
                }
            });

            $('a#remove').click(function() {
                if (i >= 2) {
                    $('#tableData>tbody>tr:last').remove();
                    i--;
                }
            });

            $('#btnGraphIt').click(function() {
                //send 'i' to the graphing function as the number of records
                flotTest(i - 1, 'lmca');
            });
            function showTooltip(x, y, contents) {
                $('<div id="tooltip">' + contents + '</div>').css({
                    position: 'absolute',
                    display: 'none',
                    top: y - 35,
                    left: x - 25,
                    border: '1px solid #fdd',
                    padding: '2px',
                    'background-color': '#fee',
                    opacity: 0.80
                }).appendTo("body").fadeIn(200);
            }
            var previousPoint = null;
            $("#placeholder").bind("plothover", function(event, pos, item) {
                $("#x").text(pos.x.toFixed(2));
                $("#y").text(pos.y.toFixed(2));
                if (item) {
                    if (item.seriesIndex == 0) {
                        if (previousPoint != item.datapoint) {
                            previousPoint = item.datapoint;

                            $("#tooltip").remove();
                            var x = item.datapoint[0],
                        y = item.datapoint[1];


                            showTooltip(item.pageX, item.pageY,
                                "BSA: " + x + "; LMCA: " + y + "; Z-score: " + calcZ(x, 'lmca', y).toFixed(1));
                        }
                    }
                    else {
                        $("#tooltip").remove();
                        previousPoint = null;
                    }
                };
            });            
        });
    </script>

 </head>
    <body>
    <div id="main">
    <h2>Charting Demo: LMCA</h2>
    <p>Enter your LMCA data (mm) into the table, adding as many rows as you need.<br />
    Click the 'Graph It!' button to plot data on a z-score graph.</p>
    <div id="JTable">
        <table id="tableData">
            <thead>
                <tr>
                    <td>
                    </td>
                    <th>
                        Height
                        (cm)
                    </th>
                    <th>
                        Weight
                        (kg)
                    </th>
                    <th>
                        LMCA (mm)
                    </th>
                    <th>
                        BSA
                    </th>
                    <th>
                        Z-Score
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>
                        t<sub>0</sub>
                    </th>
                    <td>
                        <input id="ht0" type="text" onchange="updateRow(0, 'lmca')"/>
                    </td>
                    <td>
                        <input id="wt0" type="text" onchange="updateRow(0, 'lmca')"/>
                    </td>
                    <td>
                        <input id="lmca0" type="text" onchange="updateRow(0, 'lmca')"/>
                    </td>
                    <td class="results" id="bsa0">
                        &nbsp;
                    </td>
                    <td class="results" id="lmcaZ0">
                        &nbsp;
                    </td>
                </tr>
            </tbody>
        </table>
<div class="buttonControls"></div>
<a href="#" id="add">Add Row</a><br />
<a href="#" id="remove">Remove Row</a>    
<div><input id="btnGraphIt" type="button" value="Graph It!" /></div>
</div>
</div>
<div id="placeholder" style="width:600px;height:400px;"></div>
</div>
</body>
</html>
